<template>
  <div class="one-click-case-detail-container">
    <!-- 页面头部 -->
    <a-page-header 
      class="page-header" 
      :title="`一键委案 - ${caseData.batchName || '案件详情'}`" 
      :sub-title="`案件编号：${caseId}`"
      @back="() => $router.go(-1)"
    >
      <template #extra>
        <a-button @click="handleRefresh" :loading="caseData.loading">
          <template #icon><ReloadOutlined /></template>
          刷新
        </a-button>
      </template>
      
      <!-- 案件基本信息 -->
      <a-descriptions :column="3" :bordered="false" v-if="!caseData.loading">
        <a-descriptions-item label="案件ID">{{ caseData.id }}</a-descriptions-item>
        <a-descriptions-item label="批次名称">{{ caseData.batchName }}</a-descriptions-item>
        <a-descriptions-item label="委案商">{{ caseData.entrustBName }}</a-descriptions-item>
        <a-descriptions-item label="案件状态">
          <a-tag :color="getStatusColor(caseData.state?.code)">
            {{ caseData.state?.message }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="审核结果">{{ caseData.auditResult || '暂无' }}</a-descriptions-item>
        <a-descriptions-item label="终审结果">{{ caseData.finalAuditResult || '暂无' }}</a-descriptions-item>
      </a-descriptions>
    </a-page-header>

    <!-- 一键委案功能区域 -->
    <a-card class="one-click-card" :body-style="{ padding: '24px' }">
      <template #title>
        <div class="card-title">
          <ThunderboltOutlined style="margin-right: 8px; color: #52c41a;" />
          一键委案操作
        </div>
      </template>

      <!-- 步骤指示器 -->
      <div class="steps-section">
        <a-steps :current="currentStep" :status="stepsStatus">
          <a-step title="上传Excel" description="上传审核Excel文件" />
          <a-step title="初审" description="执行初审流程" />
          <a-step title="终审" description="执行终审流程" />
          <a-step title="定时任务" description="执行定时任务" />
          <a-step title="委案配置" description="配置委案参数" />
          <a-step title="委案" description="执行委案流程" />
          <a-step title="完成" description="委案流程完成" />
        </a-steps>
      </div>

      <!-- 上传Excel区域 -->
      <div class="upload-section" v-if="currentStep === 0">
        <a-alert
          message="上传审核Excel文件"
          description="请上传包含案件审核信息的Excel文件，系统将自动解析并处理数据。"
          type="info"
          show-icon
          style="margin-bottom: 24px;"
        />
        
        <!-- Excel处理组件 -->
        <ExecExcel 
          @file-selected="handleFileSelected"
          @file-processed="handleFileProcessed"
          @file-error="handleFileError"
        />
        
        <div class="upload-actions" v-if="isFileUploaded">
          <a-button type="primary" @click="handleNextStep" :disabled="!canProceedToConfig">
            下一步：配置委案参数
          </a-button>
        </div>
      </div>

      <!-- 初审区域 -->
      <div class="audit-section" v-if="currentStep === 1">
        <a-alert
          message="正在执行初审..."
          description="系统正在对案件进行初审，请耐心等待。"
          type="info"
          show-icon
          style="margin-bottom: 24px;"
        />
        
        <div class="audit-progress">
          <a-spin :spinning="isProcessing" tip="正在执行初审...">
            <div class="progress-content">
              <div class="progress-icon">
                <LoadingOutlined style="font-size: 24px; color: #1890ff;" />
              </div>
              <div class="progress-text">
                <h4>初审进行中</h4>
                <p>正在对案件进行初步审核，请稍候...</p>
              </div>
            </div>
          </a-spin>
        </div>
      </div>

      <!-- 终审区域 -->
      <div class="audit-section" v-if="currentStep === 2">
        <a-alert
          message="案件预审通过，需要进行终审"
          description="该案件已完成预审，现在可以进行终审操作。"
          type="success"
          show-icon
          style="margin-bottom: 24px;"
        />
        
        <div class="audit-actions">
          <a-button 
            type="primary" 
            size="large"
            :loading="isProcessing"
            @click="handleStartFinalAudit"
          >
            <template #icon><CheckCircleOutlined /></template>
            开始终审
          </a-button>
        </div>
      </div>

      <!-- 定时任务区域 -->
      <div class="scheduled-task-section" v-if="currentStep === 3">
        <a-alert
          message="正在执行定时任务..."
          description="系统正在执行定时任务，请耐心等待。"
          type="info"
          show-icon
          style="margin-bottom: 24px;"
        />
        
        <div class="scheduled-task-progress">
          <a-spin :spinning="isProcessing" tip="正在执行定时任务...">
            <div class="progress-content">
              <div class="progress-icon">
                <LoadingOutlined style="font-size: 24px; color: #1890ff;" />
              </div>
              <div class="progress-text">
                <h4>定时任务执行中</h4>
                <p>正在执行委案和委案撤案的任务，请稍候...</p>
              </div>
            </div>
          </a-spin>
        </div>
      </div>

      <!-- 委案配置区域 -->
      <div class="config-section" v-if="currentStep === 4">
        <a-alert
          message="案件终审通过，请配置委案参数"
          description="该案件已完成终审，现在可以配置委案参数并执行委案操作。"
          type="success"
          show-icon
          style="margin-bottom: 24px;"
        />
        
        <a-form 
          :model="entrustForm" 
          :label-col="{ span: 6 }" 
          :wrapper-col="{ span: 18 }"
          :disabled="isProcessing"
        >
          <a-form-item label="委案商" :rules="[{ required: true, message: '请选择委案商' }]">
            <a-select 
              v-model:value="entrustForm.entrustBId" 
              placeholder="请选择委案商"
              :loading="entrustListLoading"
              @change="handleEntrustBChange"
            >
              <a-select-option 
                v-for="item in entrustList" 
                :key="item.id" 
                :value="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="委案批次名称">
            <a-input 
              v-model:value="entrustForm.batchName" 
              placeholder="请输入委案批次名称"
            />
          </a-form-item>

          <a-form-item label="跳过同客户限制">
            <a-checkbox v-model:checked="entrustForm.isInvalidRule">
              跳过同客户限制规则
            </a-checkbox>
          </a-form-item>
        </a-form>

        <div class="config-actions">
          <a-button 
            type="primary" 
            size="large"
            :loading="isProcessing"
            :disabled="!canStartEntrust"
            @click="handleStartEntrust"
          >
            <template #icon><PlayCircleOutlined /></template>
            开始一键委案
          </a-button>
        </div>
      </div>

      <!-- 委案区域 -->
      <div class="entrust-section" v-if="currentStep === 5">
        <a-alert
          message="正在执行委案..."
          description="系统正在执行委案流程，请耐心等待。"
          type="info"
          show-icon
          style="margin-bottom: 24px;"
        />
        
        <div class="entrust-progress">
          <a-spin :spinning="isProcessing" tip="正在执行委案...">
            <div class="progress-content">
              <div class="progress-icon">
                <LoadingOutlined style="font-size: 24px; color: #1890ff;" />
              </div>
              <div class="progress-text">
                <h4>委案进行中</h4>
                <p>正在执行委案流程，请稍候...</p>
              </div>
            </div>
          </a-spin>
        </div>
      </div>

      <!-- 执行进度区域 -->
      <div class="progress-section" v-if="currentStep === 6">
        <a-alert
          message="正在执行一键委案..."
          description="系统正在自动完成初审、终审、委案流程，请耐心等待。"
          type="info"
          show-icon
          style="margin-bottom: 24px;"
        />

        <div class="progress-steps">
          <div 
            v-for="(step, index) in progressSteps" 
            :key="index"
            class="progress-step"
            :class="{ 
              'completed': step.status === 'completed',
              'processing': step.status === 'processing',
              'error': step.status === 'error'
            }"
          >
            <div class="step-icon">
              <CheckCircleOutlined v-if="step.status === 'completed'" style="color: #52c41a;" />
              <LoadingOutlined v-else-if="step.status === 'processing'" style="color: #1890ff;" />
              <CloseCircleOutlined v-else-if="step.status === 'error'" style="color: #ff4d4f;" />
              <ClockCircleOutlined v-else style="color: #d9d9d9;" />
            </div>
            <div class="step-content">
              <div class="step-title">{{ step.title }}</div>
              <div class="step-description">{{ step.description }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 执行结果区域 -->
      <div class="result-section" v-if="currentStep === 7">
        <a-alert
          :message="executionResult?.success ? '一键委案执行成功' : '一键委案执行失败'"
          :description="executionResult?.message"
          :type="executionResult?.success ? 'success' : 'error'"
          show-icon
          style="margin-bottom: 24px;"
        />

        <!-- 步骤结果详情 -->
        <div class="steps-result" v-if="executionResult">
          <h4>执行详情：</h4>
          <div class="step-result-item" :class="{ 'success': executionResult.steps.preAudit.success }">
            <CheckCircleOutlined v-if="executionResult.steps.preAudit.success" style="color: #52c41a;" />
            <CloseCircleOutlined v-else style="color: #ff4d4f;" />
            <span>初审：{{ executionResult.steps.preAudit.message }}</span>
          </div>
          <div class="step-result-item" :class="{ 'success': executionResult.steps.finalAudit.success }">
            <CheckCircleOutlined v-if="executionResult.steps.finalAudit.success" style="color: #52c41a;" />
            <CloseCircleOutlined v-else style="color: #ff4d4f;" />
            <span>终审：{{ executionResult.steps.finalAudit.message }}</span>
          </div>
          <div class="step-result-item" :class="{ 'success': executionResult.steps.entrust.success }">
            <CheckCircleOutlined v-if="executionResult.steps.entrust.success" style="color: #52c41a;" />
            <CloseCircleOutlined v-else style="color: #ff4d4f;" />
            <span>委案：{{ executionResult.steps.entrust.message }}</span>
          </div>
          <div class="step-result-item" :class="{ 'success': executionResult.steps.scheduledTask.success }">
            <CheckCircleOutlined v-if="executionResult.steps.scheduledTask.success" style="color: #52c41a;" />
            <CloseCircleOutlined v-else style="color: #ff4d4f;" />
            <span>定时任务：{{ executionResult.steps.scheduledTask.message }}</span>
          </div>
        </div>

        <div class="result-actions">
          <a-button @click="handleReset">
            <template #icon><ReloadOutlined /></template>
            重新开始
          </a-button>
          <a-button type="primary" @click="handleBackToList">
            <template #icon><ArrowLeftOutlined /></template>
            返回列表
          </a-button>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { message } from 'ant-design-vue';
import {
  ReloadOutlined,
  ThunderboltOutlined,
  PlayCircleOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  LoadingOutlined,
  ClockCircleOutlined,
  ArrowLeftOutlined
} from '@ant-design/icons-vue';
import { useOneClickEntrust } from '../composables/useOneClickEntrust';
import { getReviewDetail, auditUploadRecordEntrust, finalAuditUploadRecordEntrust, countEntrustClient, entrustClient } from '../server/api';
import { useScheduledTask } from '../composables/useScheduledTask';
import ExecExcel from '../components/ExecExcel.vue';

const router = useRouter();
const route = useRoute();
const caseId = route.params.id as string;

// 使用组合式函数
const { 
  loading: isProcessing, 
  result: executionResult, 
  getEntrustList, 
  reset: resetComposable 
} = useOneClickEntrust();

// 响应式数据
const currentStep = ref(0); // 0: 上传Excel, 1: 初审, 2: 终审, 3: 定时任务, 4: 委案配置, 5: 委案, 6: 完成
const stepsStatus = ref<'wait' | 'process' | 'finish' | 'error'>('wait');
const entrustListLoading = ref(false);
const isFileUploaded = ref(false);

// 案件数据
const caseData = reactive({
  loading: false,
  id: caseId,
  batchName: '',
  entrustBName: '',
  state: {
    code: '',
    message: ''
  },
  auditResult: '',
  finalAuditResult: ''
});

// 委案表单
const entrustForm = reactive({
  entrustBId: '',
  batchName: '',
  isInvalidRule: true
});

// 委案商列表
const entrustList = ref<Array<{ id: string; name: string }>>([]);

// 文件信息
const fileInfo = reactive({
  fileName: '',
  fileUrl: '',
  fileType: '',
  caseId: ''
});

// 进度步骤
const progressSteps = ref([
  { title: '初审', description: '正在执行初审...', status: 'wait' },
  { title: '终审', description: '正在执行终审...', status: 'wait' },
  { title: '委案', description: '正在执行委案...', status: 'wait' },
  { title: '定时任务', description: '正在执行定时任务...', status: 'wait' }
]);

// 计算属性
const canProceedToConfig = computed(() => {
  return isFileUploaded.value;
});

const canStartEntrust = computed(() => {
  return entrustForm.entrustBId && 
         entrustForm.batchName && 
         !isProcessing.value;
});

// 生命周期
onMounted(() => {
  fetchCaseDetail();
  fetchEntrustList();
});

// 获取案件详情
const fetchCaseDetail = async () => {
  caseData.loading = true;
  try {
    const result = await getReviewDetail(caseId);
    
    if (result.success && result.result) {
      Object.assign(caseData, result.result);
      
      // 自动设置批次名称
      if (result.result.batchName && !entrustForm.batchName) {
        entrustForm.batchName = result.result.batchName;
      }
      
      // 根据案件状态设置流程步骤
      setCurrentStepByStatus(result.result.state?.code);
      
    } else {
      message.error('获取案件详情失败');
    }
  } catch (error) {
    console.error('获取案件详情失败:', error);
    message.error('获取案件详情失败，请重试');
  } finally {
    caseData.loading = false;
  }
};

// 根据案件状态设置当前步骤
const setCurrentStepByStatus = (statusCode: string) => {
  console.log('案件状态:', statusCode);
  
  switch (statusCode) {
    case 'TO_AUDIT':
    case 'PRE_AUDIT_FAILED':
      // 待审核或预审失败，需要从上传Excel开始
      currentStep.value = 0;
      stepsStatus.value = 'process';
      message.info('案件状态：待审核，请上传Excel文件开始流程');
      break;
      
    case 'AUDITING':
    case 'PRE_AUDIT_SUCCESS':
      // 预审通过，需要终审
      currentStep.value = 2;
      stepsStatus.value = 'process';
      message.info('案件状态：预审通过，请进行终审');
      break;
      
    case 'AUDIT_SUCCESS':
      // 终审通过，需要委案配置
      currentStep.value = 4;
      stepsStatus.value = 'process';
      message.info('案件状态：终审通过，请配置委案参数');
      break;
      
    case 'AUDIT_FAILED':
      // 审核失败，需要重新审核
      currentStep.value = 0;
      stepsStatus.value = 'error';
      message.warning('案件状态：审核失败，请重新上传Excel文件');
      break;
      
    default:
      // 其他状态，默认从上传开始
      currentStep.value = 0;
      stepsStatus.value = 'wait';
      message.info('案件状态未知，请从上传Excel文件开始');
      break;
  }
};

// 获取委案商列表
const fetchEntrustList = async () => {
  entrustListLoading.value = true;
  try {
    const result = await getEntrustList();
    entrustList.value = result;
  } catch (error) {
    console.error('获取委案商列表失败:', error);
    message.error('获取委案商列表失败');
  } finally {
    entrustListLoading.value = false;
  }
};

// 文件选择回调
const handleFileSelected = (file: File) => {
  console.log('文件已选择:', file.name);
  isFileUploaded.value = true;
};

// 文件处理完成回调
const handleFileProcessed = async (data: any) => {
  console.log('文件处理完成:', data);
  fileInfo.fileName = data.fileName || '';
  fileInfo.fileUrl = data.fileUrl || '';
  fileInfo.fileType = data.fileType || '';
  
  // 自动设置批次名称
  if (data.fileName && !entrustForm.batchName) {
    entrustForm.batchName = data.fileName.replace(/\.(xlsx|xls)$/i, '');
  }
  
  // 文件上传完成后，直接开始初审流程
  await executeEntrustFlow();
};

// 文件处理错误回调
const handleFileError = (error: string) => {
  console.error('文件处理失败:', error);
  message.error(`文件处理失败: ${error}`);
  isFileUploaded.value = false;
};

// 下一步
const handleNextStep = () => {
  if (canProceedToConfig.value) {
    // 文件上传完成后，直接开始初审流程
    executeEntrustFlow();
  }
};

// 委案商选择变化
const handleEntrustBChange = (value: string) => {
  const selectedEntrust = entrustList.value.find(item => item.id === value);
  if (selectedEntrust) {
    console.log('选择委案商:', selectedEntrust.name);
  }
};

// 开始终审
const handleStartFinalAudit = async () => {
  try {
    isProcessing.value = true;
    currentStep.value = 2;
    stepsStatus.value = 'process';
    message.info('开始执行终审...');
    
    // 调用终审接口
    const finalAuditResult = await finalAuditUploadRecordEntrust({
      id: caseId,
      state: 'AUDIT_SUCCESS',
      tsToken: localStorage.getItem('tsToken') || ''
    });
    
    if (!finalAuditResult.success) {
      throw new Error(finalAuditResult.message || '终审失败');
    }
    
    message.success('终审提交成功，等待状态更新...');
    
    // 等待终审状态更新为AUDIT_SUCCESS
    await waitForStatusUpdate('AUDIT_SUCCESS', '终审状态更新');
    
    // 执行定时任务
    currentStep.value = 3;
    message.info('开始执行定时任务...');
    
    const { executeTask } = useScheduledTask();
    const taskResult = await executeTask();
    
    if (!taskResult) {
      throw new Error('定时任务执行失败');
    }
    
    message.success('定时任务完成');
    
    // 进入委案配置
    currentStep.value = 4;
    message.info('请配置委案参数');
    
  } catch (error) {
    console.error('终审流程执行失败:', error);
    const errorMessage = error instanceof Error ? error.message : '执行失败，请重试';
    message.error(errorMessage);
    
    currentStep.value = 6;
    stepsStatus.value = 'error';
  } finally {
    isProcessing.value = false;
  }
};

// 开始一键委案
const handleStartEntrust = async () => {
  if (!canStartEntrust.value) {
    message.warning('请完成所有必填项后再执行');
    return;
  }

  // 开始执行委案流程
  await executeEntrustment();
};

// 执行委案流程
const executeEntrustFlow = async () => {
  try {
    // 步骤1: 初审
    currentStep.value = 1;
    stepsStatus.value = 'process';
    message.info('开始执行初审...');
    
    // 调用初审接口
    const preAuditResult = await auditUploadRecordEntrust({
      id: caseId,
      state: 'AUDIT_SUCCESS',
      tsToken: localStorage.getItem('tsToken') || ''
    });
    
    if (!preAuditResult.success) {
      throw new Error(preAuditResult.message || '初审失败');
    }
    
    message.success('初审提交成功，等待状态更新...');
    
    // 等待初审状态更新为PRE_AUDIT_SUCCESS
    await waitForStatusUpdate('PRE_AUDIT_SUCCESS', '初审状态更新');
    
    // 步骤2: 终审
    currentStep.value = 2;
    message.info('开始执行终审...');
    
    // 调用终审接口
    const finalAuditResult = await finalAuditUploadRecordEntrust({
      id: caseId,
      state: 'AUDIT_SUCCESS',
      tsToken: localStorage.getItem('tsToken') || ''
    });
    
    if (!finalAuditResult.success) {
      throw new Error(finalAuditResult.message || '终审失败');
    }
    
    message.success('终审提交成功，等待状态更新...');
    
    // 等待终审状态更新为AUDIT_SUCCESS
    await waitForStatusUpdate('AUDIT_SUCCESS', '终审状态更新');
    
    // 步骤3: 执行定时任务
    currentStep.value = 3;
    message.info('开始执行定时任务...');
    
    // 调用定时任务
    const { executeTask } = useScheduledTask();
    const taskResult = await executeTask();
    
    if (!taskResult) {
      throw new Error('定时任务执行失败');
    }
    
    message.success('定时任务完成');
    
    // 步骤4: 委案配置
    currentStep.value = 4;
    message.info('请配置委案参数');
    
    // 等待用户配置委案参数
    return;
  } catch (error) {
    console.error('审核流程执行失败:', error);
    const errorMessage = error instanceof Error ? error.message : '执行失败，请重试';
    message.error(errorMessage);
    
    currentStep.value = 6;
    stepsStatus.value = 'error';
  }
};

// 等待状态更新
const waitForStatusUpdate = async (targetStatus: string, description: string, maxAttempts: number = 30) => {
  let attempts = 0;
  const pollInterval = 2000; // 2秒轮询一次
  
  while (attempts < maxAttempts) {
    try {
      // 获取案件详情
      const result = await getReviewDetail(caseId);
      
      if (result.success && result.result) {
        const currentStatus = result.result.state?.code;
        console.log(`${description}: 当前状态=${currentStatus}, 目标状态=${targetStatus}`);
        
        if (currentStatus === targetStatus) {
          message.success(`${description}完成`);
          return;
        }
      }
      
      // 等待2秒后重试
      await new Promise(resolve => setTimeout(resolve, pollInterval));
      attempts++;
      
    } catch (error) {
      console.error(`${description}轮询失败:`, error);
      attempts++;
    }
  }
  
  throw new Error(`${description}超时，请手动检查案件状态`);
};

// 执行委案
const executeEntrustment = async () => {
  try {
    // 步骤1: 委案
    currentStep.value = 5;
    stepsStatus.value = 'process';
    message.info('开始执行委案...');
    
    // 获取委案初始化数据
    const countResult = await countEntrustClient({
      loanIds: [caseId],
      tsToken: localStorage.getItem('tsToken') || ''
    });
    
    if (!countResult.success) {
      throw new Error('获取委案初始化数据失败');
    }
    
    // 执行委案
    const entrustResult = await entrustClient({
      loanIds: [caseId],
      entrustBId: entrustForm.entrustBId,
      batchName: entrustForm.batchName,
      isInvalidRule: entrustForm.isInvalidRule,
      clients: countResult.result?.clients || 0,
      loans: countResult.result?.loans || 0,
      tsToken: localStorage.getItem('tsToken') || ''
    });
    
    if (!entrustResult.success) {
      throw new Error(entrustResult.message || '委案失败');
    }
    
    message.success('委案完成');
    
    // 步骤2: 完成
    currentStep.value = 7;
    stepsStatus.value = 'finish';
    message.success('一键委案执行完成');
  } catch (error) {
    console.error('委案执行失败:', error);
    const errorMessage = error instanceof Error ? error.message : '执行失败，请重试';
    message.error(errorMessage);
    
    currentStep.value = 7;
    stepsStatus.value = 'error';
  }
};

// 重置
const handleReset = () => {
  currentStep.value = 0;
  stepsStatus.value = 'wait';
  isFileUploaded.value = false;
  
  // 重置组合式函数状态
  resetComposable();
  
  // 重置文件信息
  Object.assign(fileInfo, {
    fileName: '',
    fileUrl: '',
    fileType: '',
    caseId: ''
  });
  
  // 重置进度步骤
  progressSteps.value.forEach(step => {
    step.status = 'wait';
    step.description = step.title + '...';
  });
  
  message.info('已重置，请重新开始');
};

// 返回列表
const handleBackToList = () => {
  router.push('/one-click-case-list');
};

// 刷新
const handleRefresh = () => {
  fetchCaseDetail();
};

// 获取状态颜色
const getStatusColor = (stateCode: string) => {
  const colorMap: Record<string, string> = {
    'TO_AUDIT': 'orange',
    'PRE_AUDIT_SUCCESS': 'blue',
    'AUDIT_SUCCESS': 'green',
    'AUDIT_FAILED': 'red',
    'PRE_AUDIT_FAILED': 'red'
  };
  return colorMap[stateCode] || 'default';
};
</script>

<style scoped>
.one-click-case-detail-container {
  height: 100%;
  padding: 24px;
  background-color: #f5f5f5;
  box-sizing: border-box;
}

.page-header {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 24px;
}

.one-click-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-title {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
}

.steps-section {
  margin-bottom: 32px;
}

.upload-section,
.config-section,
.audit-section,
.scheduled-task-section,
.entrust-section,
.progress-section,
.result-section {
  margin-top: 24px;
}

.upload-actions {
  text-align: center;
  margin-top: 24px;
}

.audit-progress,
.scheduled-task-progress,
.entrust-progress {
  text-align: center;
  padding: 40px 20px;
}

.progress-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.progress-icon {
  margin-bottom: 8px;
}

.progress-text h4 {
  margin: 0 0 8px 0;
  color: #262626;
  font-size: 18px;
}

.progress-text p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.config-actions,
.result-actions {
  text-align: center;
  margin-top: 24px;
}

.progress-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.progress-step {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: white;
}

.progress-step.completed {
  border-color: #52c41a;
  background: #f6ffed;
}

.progress-step.processing {
  border-color: #1890ff;
  background: #f0f9ff;
}

.progress-step.error {
  border-color: #ff4d4f;
  background: #fff2f0;
}

.step-icon {
  width: 24px;
  height: 24px;
  margin-right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-content {
  flex: 1;
}

.step-title {
  font-weight: 600;
  color: #262626;
  margin-bottom: 4px;
}

.step-description {
  color: #666;
  font-size: 14px;
}

.steps-result {
  margin-top: 16px;
}

.steps-result h4 {
  margin-bottom: 16px;
  color: #262626;
}

.step-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.step-result-item:last-child {
  border-bottom: none;
}

.step-result-item.success {
  color: #52c41a;
}

.step-result-item:not(.success) {
  color: #ff4d4f;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .one-click-case-detail-container {
    padding: 16px;
  }
  
  .progress-step {
    flex-direction: column;
    text-align: center;
  }
  
  .step-icon {
    margin-right: 0;
    margin-bottom: 8px;
  }
}
</style>
